<template>
  <div class="app-container">
    <el-row>
      <el-descriptions title="病例基本信息">
        <el-descriptions-item label="病人ID">{{
          userinfo.id
        }}</el-descriptions-item>
        <el-descriptions-item label="病人姓名">{{
          userinfo.patname
        }}</el-descriptions-item>
        <el-descriptions-item label="病案号">{{
          userinfo.fno
        }}</el-descriptions-item>
        <el-descriptions-item label="主诊断编码">
          {{ userinfo.discode }}
        </el-descriptions-item>
        <el-descriptions-item label="主诊断名称">{{
          userinfo.disname
        }}</el-descriptions-item>

        <el-descriptions-item label="病组编码">{{
          userinfo.drgcode
        }}</el-descriptions-item>

        <el-descriptions-item label="病组名称">{{
          userinfo.drgname
        }}</el-descriptions-item>

        <el-descriptions-item label="病组编码">{{
          userinfo.drgcode
        }}</el-descriptions-item>

        <el-descriptions-item label="手术编码">{{
          userinfo.optcode
        }}</el-descriptions-item>
        <el-descriptions-item label="手术名称">{{
          userinfo.optname
        }}</el-descriptions-item>

        <el-descriptions-item label="总费用">{{
          userinfo.cost
        }}</el-descriptions-item>
        <el-descriptions-item label="床日">{{
          userinfo.bed
        }}</el-descriptions-item>
        <el-descriptions-item label="药品费">{{
          userinfo.expended
        }}</el-descriptions-item>
        <el-descriptions-item label="检验费">{{
          userinfo.surveyfee
        }}</el-descriptions-item>
        <el-descriptions-item label="检查费">{{
          userinfo.examfee
        }}</el-descriptions-item>
        <el-descriptions-item label="手术费">{{
          userinfo.optfee
        }}</el-descriptions-item>
        <el-descriptions-item label="耗材费">{{
          userinfo.matfee
        }}</el-descriptions-item>
      </el-descriptions>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName" @tab-click="tab_handleClick">
        <el-tab-pane label="费用记录" name="cost">
          <el-table
            :data="
              costs.slice((currentPage - 1) * pagesize, currentPage * pagesize)
            "
            :default-sort="{ prop: '发生时间', order: 'ascending' }"
            style="width: 100%"
          >
            <!-- <el-table-column prop="医嘱ID" label="医嘱ID" width="180">
            </el-table-column> -->
            <el-table-column prop="医保项目编码" sortable label="医保项目编码">
            </el-table-column>
            <el-table-column prop="项目名称" sortable label="项目名称">
            </el-table-column>
            <el-table-column prop="数量" sortable label="数量">
            </el-table-column>
            <el-table-column prop="标准单价" sortable label="标准单价">
            </el-table-column>
            <el-table-column prop="金额" sortable label="金额">
            </el-table-column>
            <el-table-column prop="单位" sortable label="单位">
            </el-table-column>
            <el-table-column prop="执行人" label="执行人"> </el-table-column>
            <el-table-column prop="执行科室" sortable label="执行科室">
            </el-table-column>

            <el-table-column prop="类型" sortable label="类型">
            </el-table-column>
            <el-table-column prop="费用属性" sortable label="费用属性">
            </el-table-column>
            <el-table-column prop="费用类别" sortable label="费用类别">
            </el-table-column>
            <el-table-column prop="发生时间" sortable label="发生时间">
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50, 100, 200, 500, 100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="costs.length"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="诊断记录" name="dec">
          <el-table
            :data="
              decLs.slice(
                (currentPage1 - 1) * pagesize1,
                currentPage1 * pagesize1
              )
            "
            :default-sort="{ prop: '发生时间', order: 'ascending' }"
            style="width: 100%"
          >
            <!-- <el-table-column prop="医嘱ID" label="医嘱ID" width="180">
            </el-table-column> -->
            <el-table-column prop="诊断类型" sortable label="诊断类型">
            </el-table-column>
            <el-table-column prop="完整疾病编码" sortable label="完整疾病编码">
            </el-table-column>
            <el-table-column prop="诊断名称" sortable label="诊断名称">
            </el-table-column>
            <el-table-column prop="出院情况" sortable label="出院情况">
            </el-table-column>
            <el-table-column prop="记录人" sortable label="记录人">
            </el-table-column>
            <el-table-column prop="记录日期" sortable label="记录日期">
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="currentPage1"
            :page-sizes="[5, 10, 20, 50, 100, 200, 500, 100]"
            :page-size="pagesize1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="decLs.length"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="手术记录" name="opt">
          <el-table
            :data="
              optLs.slice(
                (currentPage2 - 1) * pagesize2,
                currentPage2 * pagesize2
              )
            "
           
            style="width: 100%"
          >
            <!-- <el-table-column prop="医嘱ID" label="医嘱ID" width="180">
            </el-table-column> -->
            <el-table-column prop="手术编码" sortable label="手术编码">
            </el-table-column>
            <el-table-column prop="手术名称" sortable label="手术名称">
            </el-table-column>
            <el-table-column prop="手术日期" sortable label="手术日期">
            </el-table-column>

            <el-table-column prop="手术开始时间" sortable label="手术开始时间">
            </el-table-column>
            <el-table-column prop="手术结束时间" sortable label="手术结束时间">
            </el-table-column>

            <el-table-column prop="手术级别" sortable label="手术级别">
            </el-table-column>

            <el-table-column prop="麻醉方式" sortable label="麻醉方式">
            </el-table-column>

            <el-table-column prop="切口愈合等级" sortable label="切口愈合等级">
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="currentPage2"
            :page-sizes="[5, 10, 20, 50, 100, 200, 500, 100]"
            :page-size="pagesize2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="optLs.length"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { cost, dec, opt, patientLs, patientinfo } from "@/api/patient";

@Component({
  name: "userinfo",
})
export default class extends Vue {
  private activeName: string = "cost";
  private userinfo: any = {};

  private costs: any = [];
  private decLs: any = [];
  private optLs: any = [];
  private currentPage: number = 1;
  private pagesize: number = 5;

  private currentPage1: number = 1;
  private pagesize1: number = 5;

  private currentPage2: number = 1;
  private pagesize2: number = 5;

  private handleSizeChange(val: number) {
    this.pagesize = val;
    this.currentPage = 1;
  }
  private handleCurrentChange(val: number) {
    this.currentPage = val;
  }

  private handleSizeChange1(val: number) {
    this.pagesize1 = val;
    this.currentPage1 = 1;
  }
  private handleCurrentChange1(val: number) {
    this.currentPage1 = val;
  }

  private handleSizeChange2(val: number) {
    this.pagesize2 = val;
    this.currentPage2 = 1;
  }
  private handleCurrentChange2(val: number) {
    this.currentPage2 = val;
  }

  private async created() {
    await this.info();
    this.costLs();
    this.decs();
    this.opts();
  }

  private async info() {
    let usinfo:any = await patientinfo({
      id: this.$route.query.id,
    });
    usinfo = usinfo.data;

    

    this.userinfo = usinfo;
  }

  private async costLs() {
    let costData = await cost({ pid: this.userinfo.id });
    costData = costData.data;
    this.costs = costData;
  }

  private async decs() {
    let decData = await dec({ pid: this.userinfo.id });
    decData = decData.data;
    this.decLs = decData;
  }
  private async opts() {
    let optData = await opt({ pid: this.userinfo.id });
    optData = optData.data;
    this.optLs = optData;
  }
  private tab_handleClick() {}
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
